<!--honghiepcao@gmail.com-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>       
        <script>
            function BarChart(){
                this.canvas = null;
                var xPadding = 40;
                var yPadding = 40;

                this.leftColumnTitle = '';
                this.rightColumnTitle = '';
                this.leftData = [];
                this.rightData = [];
                this.categoryTitle = '';
                this.category = [];
                this.setLeftData = function(title, data){
                    this.leftColumnTitle = title;
                    this.leftData = data;
                }
                this.setRightData = function(title, data){
                    this.rightColumnTitle = title;
                    this.rightData = data;
                }
                this.setCategory = function(data){
                    this.category = data;
                }
    
                this.setCategoryData = function(title, data){
                    this.categoryTitle = title;
                    this.category = data;
                }

                this.plotBarGraph = function(array){
                    // Draw the line graph
                    var c = this.canvas.getContext('2d');
                    c.lineWidth = 2;
                    c.beginPath();
                    var _x;
                    var _y;
                    var gradient = c.createLinearGradient(0, 0, 0, this.canvas.height)
                    gradient.addColorStop(1, '#7FE0F8');
                    //gradient.addColorStop(.5, 'Yellow');
                    gradient.addColorStop(0, '#CEF8FF');
                    c.fillStyle = gradient;
                    c.textAlign = "center"
                    c.textBaseline = "button";
                    var tep =0.3*(this.canvas.width - 2*xPadding)/ (this.category.length);             
                    for(var i = 0; i < array.length; i ++) {  
                        _x= this.getXPixel(i);
                        _y=this.getYPixel(array[i],array);
                        c.fillRect(_x-tep, _y,2*tep,this.canvas.height -_y-yPadding-1);
                    }
                    c.fillStyle = '#666';
                    c.font = '8pt sans-serif';
                    for(var i = 0; i < array.length; i ++) {  
                        _x= this.getXPixel(i);
                        _y=this.getYPixel(array[i],array);
                        c.fillText(array[i],_x, _y-4);
                    }
                }

                this.plotLineGraph = function(array){
			
                    var c = this.canvas.getContext('2d');
                    c.strokeStyle = '#FF8C21';
                    c.lineWidth = 1;
                    c.beginPath();
                    var _x = this.getXPixel(0);
                    var _y = this.getYPixel(array[0],array);

                    // Draw the line graph		       
                    c.moveTo(_x, _y);
                    for(var i = 1; i < array.length; i ++) {  
                        _x= this.getXPixel(i);
                        _y=this.getYPixel(array[i],array);
                        c.lineTo(_x, _y);
                    }
                    c.stroke();

                    // Draw the dots
                    c.fillStyle = '#FF8C21';                
                    for(var i = 0; i < array.length; i ++) {  
                        c.beginPath();
                        _x= this.getXPixel(i);
                        _y=this.getYPixel(array[i],array);
                        c.arc(_x, _y, 5, 0, Math.PI * 2, true);
                        c.fill();
                    }
                }
                this.getMax = function(array) {
                    var max = 10;
		        
                    for(var i = 0; i < array.length; i ++) {
                        if(array[i] > max) {
                            max = array[i];
                        }
                    }
                    //		    if(max>10){
                    //                        max = Math.ceil(max/100)*100;
                    //                    }
                    max = Math.ceil(max/10)*10;
                    return max;
                }

                this.getYPixel = function(value,array) {                    
                    var maxValue = this.getMax(array);
                    var maxYPixel = this.canvas.height -2*yPadding;
                    var yPixel = (value/maxValue)*maxYPixel;
                    yPixel = this.canvas.height - yPadding - yPixel;
                    return yPixel;
                }

                this.getXPixel = function(val){
                    var tep = (this.canvas.width - 2*xPadding) / (this.category.length);
                    return tep * (val+0.5)+xPadding;
                }

                //
                this.plotTitleLevels = function(maxValue, xPixel, minYPixel, maxYPixel){
                    var c = this.canvas.getContext('2d');
                    var tepValue = maxValue/10;                    
                    var tepYPixel = (maxYPixel-minYPixel)/10;
                    
                    var value;
                    var yPixel;
                    
                    for(var i = 0; i <=10; i++) {
                        value = i*tepValue;
                        yPixel = maxYPixel- i*tepYPixel;                        
                        c.fillText(value , xPixel, yPixel);
                    }
                    
                }
                
                this.plotLineLevels = function(minXPixel, maxXPixel, minYPixel, maxYPixel){
                      
                    var yPixel;
                    var tepYPixel = (maxYPixel-minYPixel)/10;
                    
                    var c = this.canvas.getContext('2d');
                    c.lineWidth = 1;
                    c.strokeStyle = '#EFEFEF';
                    c.beginPath();		
                    for(var i = 1; i <=10; i++) {
                        yPixel = maxYPixel- i*tepYPixel+0.5;
                        c.moveTo(minXPixel, yPixel);
                        c.lineTo(maxXPixel, yPixel);
                    }
                    c.stroke();
                }
                
                this.plotLeftTitle = function(){
                    var c = this.canvas.getContext('2d');
                    c.font = 'italic 8pt sans-serif';
                    c.textAlign = "left"
                    c.fillStyle = '#666';
                    //Title
                    c.fillText(this.leftColumnTitle,0, yPadding/2);
                    c.fillStyle = '#FF8C21'
                    c.strokeStyle = '#FF8C21';
                    c.lineWidth = 1;
                    c.beginPath();
                    c.moveTo(xPadding*2.5, yPadding/2);
                    c.lineTo(xPadding*3.5, yPadding/2);
                    c.stroke();

                    c.arc(xPadding*3, yPadding/2, 5, 0, Math.PI * 2, true);
                    c.fill();
		
                    //column
                    c.lineWidth = 2;
                    c.strokeStyle = '#666';
                    c.fillStyle = '#666';		
		        

                    c.beginPath();			
                    c.moveTo(xPadding, yPadding);
                    c.lineTo(xPadding, this.canvas.height - yPadding);
                    c.stroke();

                    c.textAlign = "right"
                    c.textBaseline = "middle";
			
                    var maxValue = this.getMax(this.leftData);
                    this.plotTitleLevels(maxValue, xPadding-5, yPadding, this.canvas.height -yPadding);
                   

                }

                this.plotRightTitle = function(){
                    var c = this.canvas.getContext('2d');
                    c.lineWidth = 2;
                    c.strokeStyle = '#666';			
                    c.font = 'italic 8pt sans-serif';
                    c.textAlign = "right";
                    c.fillText(this.rightColumnTitle,this.canvas.width, yPadding/2);
                    c.fillStyle = '#7FE0F8';
                    c.fillRect(this.canvas.width - 4*xPadding, yPadding/2-10,xPadding, yPadding/4);
                    c.moveTo(this.canvas.width - xPadding, yPadding);
                    c.lineTo(this.canvas.width - xPadding, this.canvas.height - yPadding);
                    c.stroke();

                    c.textAlign = "left"
                    c.textBaseline = "middle";
                    c.fillStyle = '#666';
                    
                    var maxValue = this.getMax(this.rightData);                   
                    this.plotTitleLevels(maxValue, this.canvas.width-xPadding+5, yPadding, this.canvas.height -yPadding);
		      	
                }

                this.plotCategory = function(){
                    var c = this.canvas.getContext('2d');
                    c.lineWidth = 2;
                    c.strokeStyle = '#666';
                    c.fillStyle = '#666';
                    c.font = 'italic 8pt sans-serif';
                    c.textAlign = "center";
                    c.beginPath();
                    c.moveTo(xPadding, this.canvas.height - yPadding);
                    c.lineTo(this.canvas.width-xPadding, this.canvas.height - yPadding);                    
                    // Draw category texts
                    for(var i = 0; i < this.category.length; i ++) {
                        c.fillText(this.category[i], this.getXPixel(i), this.canvas.height - yPadding/2);
                    }
                    
                    if(this.categoryTitle.length>0){
                        c.textAlign = "right";
                        c.fillText('('+this.categoryTitle+')', this.canvas.width, this.canvas.height - yPadding/2);
                    }                    
                    c.stroke();
                    
                    
                    
                    this.plotLineLevels(xPadding,this.canvas.width-xPadding,yPadding,this.canvas.height - yPadding);
                }

                this.plot = function(cv){
                    this.canvas = document.getElementById(cv);
                    //Draw the axises X
                    this.plotCategory();
                    // Draw the axises Y2 right
                    if(this.rightData.length>0){
                        this.plotBarGraph(this.rightData);
                    }
                    if(this.rightData.length>0 && this.rightColumnTitle.length>0){
                        this.plotRightTitle();
                    }
                    // Draw the axises Y1 left
                    if(this.leftData.length>0){
                        this.plotLineGraph(this.leftData);
                    }
                    if(this.leftData.length>0 && this.leftColumnTitle.length>0){
                        this.plotLeftTitle();
                    }
			
                }
            }           
        </script>
    </head>
    <body>
        <canvas id="graph" width="560" height="460">   
        </canvas> 
        <script>
            var g = new BarChart();
            g.setLeftData('Sales Value',[10,20,30,45,45,60,75,10]);
            g.setRightData('Sale By Volumes',[10,83,80,70,60,50,40,15]);
            g.setCategory(['Mon','Tue','Wen','Thu','Fri','Sat','Sun','Sum']);
            g.plot('graph');
        </script>
    </body>
</html>
